<template>
  <div class="container">
    <!-- 显示路由对应的组件、页面 -->
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem, NavBar } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(NavBar)
export default {}
</script>

<style lang="scss">
* { padding: 0; margin: 0;}
html, body, .container {
  width: 100%;
  height: 100%;
}
.container { // 前端中的弹性盒布局
  display: flex;
  flex-direction: column;
  .box {
    flex: 1;
    // background-color: #00f;
    display: flex;
    flex-direction: column;
    .header {
      height: 44px;
      background-color: #004198;
      color: #fff;
    }
    .content {
      flex: 1;
      overflow: auto; // 内容超出之后显示滚动条
    }
  }
  .footer {
    height: 50px;
    background-color: #efefef;
  }
}
</style>
